HTML은 페이지의 콘텐츠를 작성하기 위한 언어입니다. 하지만 HTML은 디자인 기능이 없고, 글자의 색깔을 바꿀 수 없습니다. 그러한 HTML을 디자인하고 레이아웃을 하려면 CSS를 사용해야 합니다.
CSS 의 구조
HTML에서 각각요소가 브라우저 창에 나타날 때 콘텐츠가 표시되는 영역을 확보합니다. 이 영역을 '박스'라고 합니다. css를 사용하면 요소의 콘텐츠나 박스의 크기, 배치를 조정할 수 있으며, 그것에 의한
페이지 전체의 디자인이나 레이아웃을 자유롭게 조작할 수 있습니다.
-콘텐츠에서 할 수 있는 것들
글꼴의 변경(사용하는 글꼴의 종류, 글자 크기의 변경 등)
글자의 조절(글자의 색, 글자에 선 넣기 등)
변형(Transform)
-요소 박스에서 할 수 있는 것들
박스의 배경색
박스의 크기나 여백의 조절
경계선(박스의 테두리)의 조절
박스 배치의 변경
CSS의 버전
CSS 버전은 HTML과 같이 W3C가 정의하고 있습니다. HTML에 비해 CSS는 기능과 구조가 방대하고 새로운 기능이 빨리 업데이트 되어 그대로는 표준화가 어렵습니다. 그러므로 현재 CSS 전체 기능을 그룹으로 분할하고 각각의 그룹으로 표준화 작업을 진행하고 있습니다. 그래서 CSS는 뚜렷한 버전이 존재하지 않습니다. CSS3 라는 것은 최신의 것을 의미합니다. CSS의 버전은 다음의 URL에 공개되어 있습니다.
CSS의 기본서식
HTML에 CSS를 적용하기 위해서는 다음의 두 가지가 필요합니다.
1. HTML 문서 안에서 특정 요소를 선택
2. 선택한 요소에서 스타일을 적용
이들 중에서 첫 번째 '특정 요소를 선택'은 CSS의 셀렉터로, 두 번째 '스타일을 적용'과 같이 CSS의 '여러 속성으로 이루어집니다.
(CSS의 기본 서삭)
HTML 문서에서 특정 요소를 선택하는 것이 '셀렉터'입니다. 서식예에서는 HTML문서에 포함된 <p> 요소 전체를 선택하고 타입 셀렉터라고 불리는 셀렉터를 선택했습니다. 셀렉터는 다양한 변화가 있고 잘 구분할 수 있다면 효율적으로 요소를 선택할 수 있게 됩니다.
선언 블록 (스타일)
셀렉터에 이어 {~]부분을 '선언 블록'이라고 합니다. 이 선언 블록 중에서 속성과 값의 세트를 원하는 만큼 추가할 수 있습니다. 다만, 선언 블록이라는 말은 많이 사용하지 않으므로 쉽게 이해할 수 있도록
'스타일'이라는 단어를 사용합니다. '스타일'이라고 쓰여 있으면 요소에 적용되어 있는 css 속성 전체를 의미합니다.
속성:
선언 블록 안에 작성된 셀렉터에서 선택된 요소를 실제로 컨트롤하여 표시하는 것이 '속성'과 그 값입니다. CSS에는 미리 정의된 속성은 수백 종류가 있습니다. 그 속성들을 사용하여 간단한 것으로는 콘텐츠 글자의 크기를 바꾸거나 배경색을 입히고, 복잡한 박스의 크기나 배치를 조정할 수 있습니다. 속성 뒤에는 반드시 콜론(:)이 붙습니다. 골론 앞 뒤는 띄어쓰기를 해도 되고, 안 해도 됩니다.
값:
속성에는 '값'이 필요합니다. 예를 들어 글자 크기를 16픽셀로 지정하고 싶다면 font-size 속성에 '16px'이라는 값을 설정하면 됩니다.또한 값 뒤에는 반드시 세미콜론(;)을 넣어야 합니다.
속성과 값의 종류에 따라서 뒤에 세미콜론이 없으면 CSS가 올바르게 작동하지 않은 경우가 있습니다
규칙:
셀렉터와 스타일(선언 블록)을 묶어서 '규칙'이라고 합니다. 웹 페이지 하나를 디자인 하려면 이 규칙을 여러 번 작성하게 됩니다.
셀렉터
요소를 선택하는 셀렉터에는 약 40종류의 변화가 있습니다. 다만, 모든 셀렉터를 자주 사용할 일은 없습니다. 실제로 웹 사이트를 만들
대에는 타입 셀렉터, 클래스 셀렉터, 자손 셀렉터를 중심으로 사용하게 됩니다.
속성
다양한 디자인, 레이아웃을 위해서 CSS에는 많은 속성이 준비되어 있습니다. 그런 수 많은 속성을 기능별로 분류하면 크게 여섯 가지로 나뉩니다.
1. 글꼴이나 텍스트 정렬을 조정하는 속성
글꼴의 종류나 크기를 조절하거나 텍스트의 줄 간격을 맞추거나 변경하는 기능입니다.
글꼴과 텍스트의 정렬을 조절하는 대표적인 속성: fiont-size, font-family, text-aline
2. 콘텐츠의 색이나 박스의 배경을 조절하는 속성
텍스트의 색깔, 박스의 배경색, 배경의 그림, 박스의 선(테두리) 등의 색상을 지정하는 속성입니다. 자주 사용하는 기능으로 대부분 중요합니다.
콘텐츠의 색이나 박스의 배경을 조절하는 대표적인 속성: color, background, border
3. 박스의 크기나 주위의 공간을 조절하는 속성
HTML 요소가 브라우저 창에 표시되는'박스'의 너비, 높이, 여백을 CSS에서 조정할 수 있습니다.
박스의 크기나 주위의 공간을 조절하는 대표적인 속성: width,height,padding,border,margin
4. 박스의 배치를 제어하는 속성
'인라인 박스'라면 왼쪽에서 오른쪽으로, '블록 상자'라면 위에서 아래로 규칙적을 배치됩니다. 다만 표준적인 박스 배치 기능에 의해서 자유롭게 페이지를 레이아웃 할 수 없습니다. CSS에서는 보다 복잡한 박스 배치 기능인 많이 있습니다. 박스의 배치를 제어하는 대표적인 속성: flot, position, flexbox
5.HTML으로는 쓸 수 없는 콘텐츠를 표시하는 속성
리스트의 각 항목 맨 앞에 ' .'이나번호를 표시하거나 요소의 콘텐츠 앞뒤에 텍스트를 삽입하는 기능도 CSS에 있습니다. HTML에서 쓸 수 없는 콘텐츠를 표시하는 대표적인 속성과 셀렉터: list-style, ::before(셀렉터), ::after(셀렉터)
6. 기타
커서를 변경하는 cursor 속성 요소의 콘텐츠를 변형시키는 트랜스 폼 등의 기능이 있습니다. 또한 속성은 아니지만 웹 디자인에 필수적인 미디어 쿼리 기능도 있습니다.
기타속성. 기능: cursor, transform, 테이블에 적용하는 각종 속성, @media
속성에 지정하는 값
CSS의 모든 속성에는 값을 지정할 필요가 있습니다. 지정할 값은 다음 세가지로 나뉩니다.
- 크기:
글자의 크기, 박스의 너비와 높이, 여백 등 CSS에는 크기를 지정하는 경우가 많습니다. 예를 들어 글자의 크기 16픽셀이라면 '16px'이라고 숫자에 단위를 지정하면 됩니다.
- 색상:
글자의 색상이나 배경색 등 색을 지정하는 경우도 많이 있습니다.
- 각각의 속성에 특별한 '키워드'나 고유 명사
크기나 색상이 아니라 특별한 '키워드'를 지정하는 속성도 있습니다. 예를 들면 박스의 배치를 제어하는 기능의 속성에는 거의 모든 키워드를 지정합니다. 또한 글꼴을 설정하려면 font-family 속성값으로 사용하고 싶은 글꼴 이름을 지정합니다.
값의 단위
속성에 값을 설정할 때 '단위'가 필요한 경우가 있습니다. 특히, 글자의 크기와 박스 크기 등을 조정하는 속성에는 숫자에 단위가 있는 값을 지정합니다.
CSS에 정의되어 있는 큰 단위
|
단위 |
설명 |
용도 |
|
|
길 이 단 위
|
Em |
1em=부모 요소가 설정되어 있는 글자 크기 |
글자 크기, 박스 크기
설정 |
|
Rem |
1rem=<html>에 설정되어 있는 글자 크기 (표준으로 1rem=16px) |
글자 크기 설정 |
|
|
Vw |
1vw=뷰포트의 너비 1/100 |
박스 크기 설정 |
|
|
Vh |
1포=뷰포트 높이 1/100 |
박스 크기 설정 |
|
|
Vmin |
1vmin=뷰포트의 높이와 너비 중에서 짧은 쪽의 1/100 |
박스의 크기 설정 |
|
|
Vmax |
1vmax=뷰포트의 높이와 너비 중에서 긴쪽의 1/100 |
박스의 크기 설정 |
|
|
Px |
1px=1픽셀의 크기 |
글자의크기, 박스의 크기 |
|
|
Pt |
1pt=1포인트(1/72인치,약 0.035cm) |
글자 크기, 박스 크기 |
|
|
% |
기준이 되는 길이와 크기에 대한 비율 |
글자크기 박스크기 설정 |
|
|
각 도 |
Deg |
1deg=1˚ |
트랜스 폼의 설정 |
|
Rad |
1rad=1 라디안 |
트랜스 폼의 설정 |
|
|
시 간 |
S |
1s=1초 |
트랜지션, 애니메이션의
설정 |
|
Ms |
1ms=1000밀리초_1/1000ch) |
트랜지션, 애니메이션의설정 |
|
**@ 규칙
CSS의 규칙 중에는 @로 시작하는 셀렉터를 사용하지 않은 규칙이 있습닏. 이러한 규칙은 @ 규칙
이라고 불리며 문장 코드 세트의 지정이나 미디어 쿼리 설정 등에 사용합니다.
![[독후감] AGI, 천사인가 악마인가: 인류에게 주어진 마지막 골든 아워에 대한 성찰](https://blogger.googleusercontent.com/img/a/AVvXsEi2kTs1mAJ7TA6CXouzyvcZzkba7__Rf4PwZVQbDFELV-LKRDcEHHqO_SJ3IBA8Tcxu9PbPvNxXG2Cpzlg7iIKYwaMmLlDIJxZZkDQnLSoRpuIBk_ESHNam6b32slcjKE_5z_D6lndM8FgkoTsAmxmRz2EHPWocVwqMAKQe2t74OHLnQepFueBEjPrsHF9d=w72-h72-p-k-no-nu)
0 댓글